<template>
	<view class="videobox">
		<view class="showbox">
			<swiper class="swiper" :duration="300" :vertical="true" @change="changeswiper" :circular="true">
				<block v-for="(item,index) in list" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<video :id="'video'+index" :src="item.video[0]" :controls="false" :autoplay="false"
								:loop="true" play-btn-position="center" style="width: 100%;height: 100%;"
								object-fit="cover" @click="startvideo(index)">
								<cover-image class="suspend" v-if="item.pause" src="../../static/img/play-fill.png">
								</cover-image>
							</video>
							<view class="rights">
								<image @click="gopage(item.client_uid)" :src="item.avatar" mode="aspectFill"
									class="headimg"></image>
								<view class="addbtn" @click="attention(item.client_uid,index)">
									<!-- <u-icon :name="item.is_follow==0?'plus':'checkbox-mark'" color="#fff" size="22"></u-icon> -->
									{{item.is_follow==0?'+关注':'已关注'}}
								</view>
								<view class="dianzanbox" @click="praise(item.id,index)">
									<text class="icons icon-zan" :class="item.is_dz==1?'opt':''"></text>
									<text class="number">{{item.dz_num}}</text>
								</view>
								<view class="cometbox" @click="getcommentlist">
									<text class="icons icon--pinglun"></text>
									<text class="number">{{item.pl_num}}</text>
								</view>
								<view class="cometbox" @click="item.goods_id>0?getforumgoods(item.goods_id):''">
									<text class="icons icon-gushu"></text>
									<text class="number">{{item.goods_id>0?'供应':'暂无'}}</text>
								</view>
								<view class="cometbox" @click="shareable = true">
									<text class="icons icon-fenxiangzhuanfa"></text>
									<text class="number">分享</text>
								</view>
							</view>
							<view class="videoinfo">
								<view class="namedes" @click="gopage(item.client_uid)">
									<text>{{item.nickname}}</text>
									<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
									<view class="xinyong_box">
										<view class="xin">信</view>
										<view class="xin_number">{{item.credit_value}}</view>
										<view class="shiming" v-if="item.realname">实</view>
										<view class="qiye" v-if="item.enterprise">企</view>
									</view>
								</view>
								<view class="contenttext clamp3" v-if="item.content">{{item.content}}</view>
							</view>

						</view>
					</swiper-item>
				</block>
			</swiper>

			<view class="tabs">
				<view class="onetab" @click="tabchange(0)"><text :class="isactive==0?'active':''">关注</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==0"></image>
				</view>
				<view class="onetab"><text :class="isactive==1?'active':''">短视频</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==1"></image>
				</view>
				<view class="onetab" @click="tabchange(2)"><text :class="isactive==2?'active':''">头条</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==2"></image>
				</view>
			</view>
		</view>
		<pagetabbar :currentIndex="currentIndex" :unread="unread"></pagetabbar>

		<view class="mask" v-if="shareable||cometable||shopable">
			<view v-if="shareable" class="sharebox">
				<view class="sharetext">分享至</view>
				<!-- <view class="sharecontent"> -->
				<!-- <view class="shareone">
						<view class="shareicon"></view>
						<text>站内好友</text>
					</view> -->
				<!-- <view class="shareone">
						<view class="shareicon"></view>
						<text>朋友圈</text>
					</view> -->
				<!-- </view> -->
				<view class="sharecontent">
					<button open-type="share" class="shareone">
						<image src="../../static/img/share1.png" mode="widthFix" class="shareicon"></image>
						<text>微信好友</text>
					</button>
					<!-- <view class="shareone">
						<image src="../../static/img/share2.png" mode="widthFix" class="shareicon"></image>
						<text>朋友圈</text>
					</view>
					<view class="shareone">
						<image src="../../static/img/share3.png" mode="widthFix" class="shareicon"></image>
						<text>复制链接</text>
					</view> -->
					<view class="shareone" @click="plaint">
						<image src="../../static/img/share4.png" mode="widthFix" class="shareicon"></image>
						<text>投诉</text>
					</view>
				</view>
				<view class="cancel" @click="shareable = false">取消</view>
			</view>
			<view v-if="cometable" class="sharebox">
				<block v-for="(item,index) in list" :key="index">
					<block v-if="subscript==index">
						<view class="comettitle">
							共{{item.pl_num}}个评价
							<u-icon name="close" color="#999999" size="28" class="closebtn" @click="cometable = false">
							</u-icon>
						</view>
					</block>
				</block>
				<scroll-view scroll-y="true" class="cometshow" @scrolltolower="getnextevaluate">
					<block v-for="(item,index) in commentlist" :key="index">
						<view class="cometone">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="cometinfo">
								<view class="name">{{item.nickname}}</view>
								<view class="comets">{{item.content}}</view>
								<view class="time">{{item.createtime}}</view>
								<block v-for="(item2,index2) in item.list" :key="index">
									<view class="answers">作者回复: {{item2.content}}</view>
									<view class="time">{{item2.createtime}}</view>
								</block>
							</view>
						</view>
					</block>

					<view class="not_more" v-if="commentlist.length<1">
						<image src="/static/img/wxiaoxi.png" mode="widthFix"></image>
						<view class="text">暂无评论</view>
					</view>
					<view class="nomore" v-if="nomore&&commentlist.length>0">—— · 没有更多了 · ——</view>
				</scroll-view>
				<view class="bottoms">
					<u-input confirm-type="send" v-model="contents" type="text" :border="false" placeholder="喜欢就评论支持一下吧"
						placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false"
						@confirm="evaluate" />
					<text class="tit">发送</text>
				</view>
			</view>
			<view v-if="shopable" class="sharebox">
				<view class="sharetext">关联供应商品</view>
				<view class="tree_One" @click="gosupplydetail(forumgoods.id)">
					<image :src="forumgoods.image" mode="aspectFill" class="hots_oneBack"></image>
					<view class="tree_oneright">
						<view class="clamp2 hot_name">{{forumgoods.title}}</view>
						<view class="hot_info">
							<view class="hot_price"><text>￥</text>{{forumgoods.money}}<text>/{{forumgoods.unit}}</text>
							</view>
							<text class="hot_looks">{{forumgoods.view}}人查看</text>
						</view>
						<!-- <view class="hot_citys">产品规格产品规格</view> -->
					</view>
				</view>
				<view class="cancel" @click="shopable = false">取消</view>

			</view>
		</view>
	</view>
</template>

<script>
	var _this, $paginator, $paginator2, shak;
	export default {
		data() {
			return {
				unread: "",
				currentIndex: 1,
				// 分享显示
				shareable: false,
				// 评论显示
				cometable: false,
				// 关联的商品展示
				shopable: false,
				// 面包屑选中的第几个
				isactive: 1,
				// 数据列表
				list: [],
				// 当前播放的下标
				subscript: 0,
				//评论列表
				commentlist: [],
				//供应商品
				forumgoods: {},
				// 评论内容
				contents: "",
				// 没有更多了
				nomore: false,
			}
		},
		onLoad(e) {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
			uni.createVideoContext('video0').play()
			setTimeout(function() {
				$paginator.nextPager(() => {
					_this.getdata()
				})
			}, 1000);

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				let url = '/home/station/newsdetail?id=' + _this.list[_this.subscript].id
				_this.shareable = false
				return {
					path: url
				}
			}
		},
		methods: {
			// 跳转到关注和头条
			tabchange: function(isactive) {
				uni.redirectTo({
					url: "/pages/community/pagetwo?isactive=" + isactive
				})
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('getvideolist', {
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
					pagesize: 1,
				}, (data) => {
					if (data.list == '') {
						uni.showToast({
							title: "暂无视频动态",
							icon: "none",
						})
					}

					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
				})
			},
			// swiper切换
			changeswiper(e) {
				_this.subscript = e.detail.current
				let index = e.detail.current
				// 跳转到第一个的时候让最后一个暂停
				if (index == 0) {
					uni.createVideoContext('video' + (_this.list.length - 1)).pause()
					uni.createVideoContext('video' + (_this.list.length - 1)).seek(0)
				}
				// 切换到上一个或者下一个保证第一个是禁止的
				if (e.detail.current != 0) {
					uni.createVideoContext('video0').pause()
					uni.createVideoContext('video0').seek(0)
				}
				// 暂停上一个视频
				uni.createVideoContext('video' + (index - 1)).pause()
				uni.createVideoContext('video' + (index - 1)).seek(0)
				if (index > 0) {
					_this.list[index - 1].pause = false
				}
				_this.$set(_this.list, index - 1, _this.list[index - 1])
				// 暂停下一个视频
				uni.createVideoContext('video' + (index + 1)).pause()
				uni.createVideoContext('video' + (index + 1)).seek(0)
				if (_this.list[index + 1]) {
					_this.list[index + 1].pause = false
					_this.$set(_this.list, index + 1, _this.list[index + 1])
				}
				// 开始当前视频
				setTimeout(function() {
					uni.createVideoContext('video' + index).play()
				}, 100);

				// 获取下一个视频
				if (_this.list.length - 1 == index) {
					$paginator.nextPager(() => {
						_this.getdata()
					})
				}

			},
			// 获取供应商品
			getforumgoods(id) {
				_this.$api.get("getforumgoods", {
					id: id
				}).then(data => {
					_this.shopable = true
					_this.forumgoods = data
				});
			},
			// 跳转到商品去
			gosupplydetail(id) {
				_this.shopable = false
				uni.navigateTo({
					url: "/home/index/supplydetail?id=" + id
				})
			},
			// 查看评论
			getcommentlist() {
				_this.commentlist = []
				_this.cometable = true
				$paginator2 = new _this.$paginator(_this.$api)
				_this.getcomment(true)
			},
			//评论列表
			getcomment: function(firstLoad = false) {
				$paginator2.getData('getcommentlist', {
					id: _this.list[_this.subscript].id
				}, (data) => {
					if (firstLoad) {
						_this.commentlist = data.list ? data.list : []
					} else {
						_this.commentlist = _this.commentlist.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			// 评价获取下一页
			getnextevaluate() {
				$paginator2.nextPager(() => {
					_this.getcomment()
				})
			},
			// 普通用户评价
			evaluate() {
				if (_this.contents.length < 1) {
					uni.showToast({
						title: "请输入评论语言",
						icon: "none",
					})
					return false
				}

				_this.$api.islogin(() => {
					_this.$api.post("savecomment", {
						select_type: 4,
						other_type: 1,
						contents: _this.contents,
						type_id: _this.list[_this.subscript].id
					}).then(data => {
						if (data != 1) {
							_this.list[_this.subscript].pl_num = _this.list[_this.subscript].pl_num + 1
							uni.showToast({
								title: "评论成功",
								icon: "none",
								duration: 500
							})
						} else {
							uni.showToast({
								title: "发表成功，等待评论审核",
								icon: "none",
								duration: 500
							})
						}
						_this.contents = ""
						_this.cometable = false
					});
				})
			},
			// 点赞
			praise(id, index) {
				_this.click_shake(() => {
					_this.$api.islogin(() => {
						_this.$api.get("savefabulous", {
							select_type: 1,
							id: id
						}).then(data => {
							let item = _this.list[index]
							item.is_dz = item.is_dz == 1 ? 0 : 1
							item.dz_num = item.is_dz == 1 ? item.dz_num + 1 : item.dz_num - 1
							console.log(item)
							_this.$set(_this.list, index, item)
						});
					})
				})
			},

			// 关注
			attention(id, index) {
				_this.click_shake(() => {
					_this.$api.islogin(() => {
						_this.$api.get("savefollow", {
							select_type: 2,
							id: id
						}).then(data => {
							let item = _this.list[index]
							item.is_follow = item.is_follow == 0 ? 1 : 0
							console.log(item.is_follow)
							_this.$set(_this.list, index, item)
						});
					})
				})
			},
			// 跳转到店铺详情
			gopage(id) {
				_this.click_shake(() => {
					uni.navigateTo({
						url: "/home/station/stationpage?id=" + id
					})
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			// 投诉
			plaint() {
				_this.$api.islogin(function() {
					_this.shareable = false
					let url = "/personal/complaint?source=2&type=2&shopname=" + _this.list[_this.subscript]
						.nickname + "&type_id=" + _this.list[_this.subscript].client_uid + "&shopimg=" + _this
						.list[_this.subscript].avatar
					uni.navigateTo({
						url: url
					})
				})
			},
			// 视频操作
			startvideo(index) {
				if (!_this.list[index].pause) {
					uni.createVideoContext('video' + index).pause()
					_this.list[index].pause = true
					_this.$set(_this.list, index, _this.list[index])
				} else {
					uni.createVideoContext('video' + index).play()
					_this.list[index].pause = false
					_this.$set(_this.list, index, _this.list[index])
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videobox {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.showbox {
			width: 100%;
			background-color: #000;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			height: calc(100vh - calc(env(safe-area-inset-bottom) + 98rpx));

			.swiper {
				width: 100%;
				height: calc(100vh - calc(env(safe-area-inset-bottom) + 98rpx));
			}

			.swiper-item {
				width: 100%;
				position: relative;
				height: calc(100vh - calc(env(safe-area-inset-bottom) + 98rpx));
			}

			video {
				width: 100%;
			}

			.suspend {
				position: fixed;
				width: 120rpx;
				height: 120rpx;
				z-index: 10;
				font-size: 80rpx;
				color: #FFFFFF;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%)
			}

			.tabs {
				position: absolute;
				top: 103rpx;
				left: 21rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.onetab {
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					text {
						color: #fff;
						font-size: 32rpx;
					}

					.active {
						font-size: 36rpx;
						font-weight: bold;
					}

					image {
						margin-top: 13rpx;
						width: 45rpx;
						height: auto;
						position: absolute;
						bottom: -40rpx;
					}
				}
			}

			.rights {
				position: absolute;
				right: 28rpx;
				width: 94rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 20;
				bottom: 400rpx;

				.headimg {
					width: 94rpx;
					height: 94rpx;
					border-radius: 50%;
				}

				.addbtn {
					width: 75rpx;
					height: 40rpx;
					border-radius: 20rpx;
					background-color: #38BE8C;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: -20rpx;
					color: #fff;
					font-size: 18rpx;
				}

				.dianzanbox {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 30rpx;

					.icons {
						font-size: 58rpx;
						color: #fff;
					}

					.opt {
						color: #FE524B;
					}

					.number {
						margin-top: 13rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}

				.cometbox {
					margin-top: 38rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.icons {
						font-size: 58rpx;
						color: #fff;
					}

					.iconfont {
						font-size: 58rpx;
						color: #fff;
					}

					.number {
						margin-top: 13rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
			}

			.videoinfo {
				position: absolute;
				bottom: 98rpx;
				bottom: calc(env(safe-area-inset-bottom) + 98rpx);
				padding: 0 26rpx;
				display: flex;
				flex-direction: column;

				.namedes {
					display: flex;
					flex-direction: row;
					align-items: flex-end;

					text {
						color: #fff;
						font-size: 34rpx;
						font-weight: bold;
						max-width: 280rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					image {
						height: 36rpx;
						max-width: 120rpx;
						margin-left: 12rpx;
					}

					.xinyong_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 8rpx;

						.xin {
							width: 30rpx;
							height: 30rpx;
							background: #00C575;
							border-radius: 3px 0 0 3rpx;
							text-align: center;
							line-height: 30rpx;
							color: #fff;
							font-size: 20rpx;
						}

						.xin_number {
							background-color: #fff;
							border: 2rpx solid #00C575;
							border-radius: 0 3rpx 3rpx 0;
							color: #00C575;
							font-size: 20rpx;
							text-align: center;
							height: 30rpx;
							line-height: 30rpx;
							min-width: 46rpx;
						}
					}
				}

				.contenttext {
					color: #fff;
					font-size: 28rpx;
					margin-top: 28rpx;
				}
			}
		}


		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 10005;

			.sharebox {
				// padding: 0 25rpx;
				background-color: #fff;
				padding-bottom: env(safe-area-inset-bottom);
				display: flex;
				flex-direction: column;
				border-radius: 20rpx 20rpx 0 0;
				position: absolute;
				bottom: 0;
				width: 100%;
				z-index: 99;

				.sharetext {
					text-align: center;
					padding: 34rpx 0;
					color: #666666;
					font-size: 30rpx;
				}

				.sharecontent {
					padding: 19rpx 0;
					border-bottom: 2rpx solid #E6E6E6;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;

					.shareone {
						padding: 0 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: #FFFFFF;
						margin: 0;
						line-height: 28rpx;

						&::after {
							border: 0;
						}

						.shareicon {
							width: 110rpx;
							height: 110rpx;
							border-radius: 50%;
						}

						text {
							margin-top: 20rpx;
							color: #666666;
							font-size: 24rpx;
						}
					}
				}

				.cancel {
					padding: 23rpx 0;
					text-align: center;
					color: #666666;
					font-size: 30rpx;
				}

				.comettitle {
					padding: 33rpx 0;
					border-bottom: 2rpx solid #E6E6E6;
					text-align: center;
					font-size: 30rpx;
					position: relative;

					.closebtn {
						right: 31rpx;
						position: absolute;
					}
				}

				.cometshow {
					height: 755rpx;
					padding: 0 25rpx 130rpx;
					display: flex;
					flex-direction: column;
					width: 700rpx;

					.cometone {
						display: flex;
						flex-direction: row;
						padding: 33rpx 0;

						image {
							width: 75rpx;
							height: 75rpx;
							border-radius: 50%;
						}

						.cometinfo {
							margin-left: 10rpx;
							width: 610rpx;

							.name {
								color: #999999;
								font-size: 28rpx;
							}

							.comets {
								margin-top: 16rpx;
								color: #222222;
								font-size: 28rpx;
							}

							.time {
								margin-top: 18rpx;
								color: #999999;
								font-size: 22rpx;
							}

							.answers {
								margin-top: 34rpx;
								color: #999999;
								font-size: 28rpx;
							}
						}
					}

					.nomore {
						font-size: 24rpx;
					}
				}

				.tree_One {
					display: flex;
					flex-direction: row;
					margin: 0 25rpx;
					background: #FFFFFF;
					position: relative;
					padding-bottom: 50rpx;
					border-bottom: 2rpx solid #e6e6e6;

					.hots_oneBack {
						width: 180rpx;
						height: 180rpx;
						border-radius: 5rpx;
					}

					.tree_oneright {
						display: flex;
						flex-direction: column;
						margin-left: 23rpx;
						flex: 1;
						width: 500rpx;

						.hot_name {
							font-size: 28rpx;
							color: #222222;
							margin: 14rpx 7rpx 0 7rpx;
							height: 80rpx;
						}

						.hot_info {
							margin-top: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							.hot_price {
								font-size: 30rpx;
								color: #F73F3F;
								font-weight: bold;
								display: flex;
								flex-direction: row;
								align-items: flex-end;

								text {
									font-weight: normal;
									font-size: 24rpx;
								}
							}

							.hot_looks {
								font-size: 22rpx;
								color: #999999;
								margin-left: 22rpx;
							}
						}

						.hot_citys {
							margin-top: 18rpx;
							margin-left: 11rpx;
							color: #999999;
							font-size: 22rpx;
						}
					}
				}

				.bottoms {
					height: 129rpx;
					position: fixed;
					bottom: 0;
					width: 94%;
					background: #ffffff;
					box-shadow: 0 -4rpx 16rpx 0 rgba(184, 178, 178, 0.25);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 3%;
					padding-bottom: env(safe-area-inset-bottom);
					box-sizing: initial;

					.lineputs {
						flex: 1;
						padding: 0 30rpx;
						background-color: #F7F7F7;
						border-radius: 30rpx;
					}

					.tit {
						width: 100rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
